import React, { useState, useEffect } from "react";
import Input from "../../components/input";
import { getPeriodicalList } from "../../components/api";
import style from "./date.module.css";
import { NavLink } from "react-router-dom";
import Menu from "../../hoc/menu";
const { content, mask } = style;

interface iPeriodical {
  id: number;
  img: string;
  name: string;
  mark: string;
  [propName: string]: any;
}
function Date() {
  let [periodical, setPeriodical] = useState<iPeriodical[]>([]);
  const getPeriodical = async () => {
    let res = await getPeriodicalList();
    // console.log(res, "periodical");
    setPeriodical(res.data);
  };
  useEffect(() => {
    getPeriodical();
  }, []);
  return (
    <div>
      <Input></Input>
      <div className={content}>
        {periodical.map((item: any) => (
          <NavLink
            key={item.id}
            to={{ pathname: "/author/" + item.id + "/" + item.name }}
          >
            <section key={item.id}>
              <div className={mask}>
                <img src={item.img} alt="" />
                <h1>{item.mark}</h1>
              </div>
              <p>{item.name}</p>
            </section>
          </NavLink>
        ))}
      </div>
    </div>
  );
}

export default Menu(Date);
